<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            height: 500px;
            background-color: #ccc;
        }
        ul li {
            width: 50px;
            height: 50px;
            border: 1px solid #000; 
            box-sizing: border-box;
            float: left;
        }
        /* even */
        /* ul li:nth-of-type(odd) {
            background-color: red;
        } */
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        // 要求:
            // 设置li标签中,属于偶数下标的元素.  0 2 4 6 8 10
            // 设置这些偶数系列的li标签背景色为红色
            // 否则,奇数系列的li标签背景色为绿色
    
        // 编码: 
        // 1.0 获取li标签
        // 方式1:
        var ul = document.getElementsByTagName("ul")[0];
        // var aLi = ul.getElementsByTagName("li");
        // 方式2:
        // var aLi = ul.children;
        // 方式3: 
        // var aLi = document.querySelectorAll("li:nth-of-type(odd)");
        // var aLi = document.querySelectorAll("li:nth-of-type(even))");
        var aLi = document.querySelectorAll("ul li");
        // console.log(aLi);

        // 2.0 循环标签数组
        for(var i = 0 ; i < aLi.length ; i ++){
            // 判断 i是否为偶数
            if(i % 2 === 0){
                // 设置标签数组指定元素的背景色
                aLi[i].style.backgroundColor = "red";
            }else {
                // 设置标签数组指定元素的背景色
                aLi[i].style.backgroundColor = "green";
            }
        }




    </script>
</body>
</html>